<!DOCTYPE HTML>
<html lang>
<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="腾宇的个人博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="https://gitee.com/bingtengaoyu/blog">
    <!--SEO-->

    <meta name="keywords" content>


    <meta name="description" content="React状态管理器 - Mbox@(作者)[腾宇]

1、MobX 是一个简单的、可扩展的状态管理器，他通过透明的函数式编程使得状态管理变的简单和可扩展2、React 和 MobX 是一对强力...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->


<title>React状态管理器 - Mbox | 腾宇的个人博客</title>


    <link rel="alternate" href="/atom.xml" title="腾宇的个人博客" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.5.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header"  style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)"  >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='耿兵兵'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                 <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://gitee.com/bingtengaoyu/blog">腾宇的个人博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog"><i class="fa "></i>Home</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/vuetools/#/"><i class="fa "></i>vue插件</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/reactantd/#/"><i class="fa "></i>reactAnt模板</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/home/"><i class="fa "></i>简介</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="http://gank.io/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="React状态管理器 - Mbox">
            
	            React状态管理器 - Mbox
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2019/07/21</span>
        </span>
        
    
</div>
            
            
    </div>
    
    <div class="post-body post-content">
        <h1 id="React状态管理器-Mbox"><a href="#React状态管理器-Mbox" class="headerlink" title="React状态管理器 - Mbox"></a>React状态管理器 - Mbox</h1><p>@(作者)[腾宇]</p>
<blockquote>
<p>1、MobX 是一个简单的、可扩展的状态管理器，他通过透明的函数式编程使得状态管理变的简单和可扩展<br>2、React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。<br>3、Mobx 最最核心的概念只有 2 个。 @observable 和 @observer ，它们分别对应的是被观察者和观察者。</p>
</blockquote>
<h4 id="1、通过透明的函数响应式编程-transparently-applying-functional-reactive-programming-TFRP-使得状态管理变得简单和可扩展"><a href="#1、通过透明的函数响应式编程-transparently-applying-functional-reactive-programming-TFRP-使得状态管理变得简单和可扩展" class="headerlink" title="1、通过透明的函数响应式编程 (transparently applying functional reactive programming - TFRP) 使得状态管理变得简单和可扩展"></a>1、通过透明的函数响应式编程 (transparently applying functional reactive programming - TFRP) 使得状态管理变得简单和可扩展</h4><h4 id="2、React-和-Mbox-的组合"><a href="#2、React-和-Mbox-的组合" class="headerlink" title="2、React 和 Mbox 的组合"></a>2、React 和 Mbox 的组合</h4><ul>
<li><strong>React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。</strong></li>
<li><strong>而 MobX 提供机制来存储和更新应用状态供 React 使用。</strong></li>
<li><strong>React 提供了优化 UI 渲染的机制， 这种机制就是通过使用虚拟 DOM 来减少昂贵的DOM 变化的数量。</strong></li>
<li><strong>MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。</strong></li>
</ul>
<h4 id="3、MobX-会对什么作出响应？"><a href="#3、MobX-会对什么作出响应？" class="headerlink" title="3、MobX 会对什么作出响应？"></a>3、MobX 会对什么作出响应？</h4><ul>
<li><strong>MobX 会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。</strong></li>
</ul>
<h4 id="4、原则"><a href="#4、原则" class="headerlink" title="4、原则"></a>4、原则</h4><ul>
<li><strong>MobX 中支持单项数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图</strong></li>
<li><strong>状态改变时，所有衍生都会进行原子级的自动更新，因此不会观察到中间值</strong></li>
<li><strong>所有衍生默认都是同步更新，这意味着可以在改变状态之后更安全的检查计算值</strong></li>
<li><strong>计算值是延迟更新的，任何不在使用状态的计算值将不会更新</strong></li>
<li><strong>所有计算值都应该是纯净的，他们不应该用来改变状态</strong></li>
</ul>
<h5 id="一个读取store的例子"><a href="#一个读取store的例子" class="headerlink" title="一个读取store的例子"></a>一个读取store的例子</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; render &#125; <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;observable&#125; <span class="keyword">from</span> <span class="string">'mobx'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;observer&#125; <span class="keyword">from</span> <span class="string">'mobx-react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 最简单的 mobx 就是一个观察者模式</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Store</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 被观察者</span></span><br><span class="line">  @observable todos = [&#123;</span><br><span class="line">    title: <span class="string">"完成 Mobx 翻译"</span>,</span><br><span class="line">    done: <span class="literal">false</span>,</span><br><span class="line">  &#125;];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 观察者</span></span><br><span class="line">@observer</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoBox</span> <span class="keyword">extends</span> <span class="title">Component</span>  </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;ul&gt;</span><br><span class="line">        &#123;<span class="keyword">this</span>.props.store.todos.map(<span class="function"><span class="params">todo</span> =&gt;</span> &lt;li&gt;&#123;todo.title&#125;&lt;/li&gt;)&#125;</span><br><span class="line">      &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const store = new Store();</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">render(</span></span><br><span class="line"><span class="regexp">  &lt;TodoBox store=&#123;store&#125; /</span>&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="一个写store的例子"><a href="#一个写store的例子" class="headerlink" title="一个写store的例子"></a>一个写store的例子</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; render &#125; <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;observable, action, computed,useStrict&#125; <span class="keyword">from</span> <span class="string">'mobx'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;observer&#125; <span class="keyword">from</span> <span class="string">'mobx-react'</span>;</span><br><span class="line"></span><br><span class="line">useStrict(<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Store</span> </span>&#123;</span><br><span class="line">  @observable todos = [&#123;</span><br><span class="line">    title: <span class="string">"todo标题"</span>,</span><br><span class="line">    done: <span class="literal">false</span>,</span><br><span class="line">  &#125;,&#123;</span><br><span class="line">    title: <span class="string">"已经完成 todo 的标题"</span>,</span><br><span class="line">    done: <span class="literal">true</span>,</span><br><span class="line">  &#125;];</span><br><span class="line"></span><br><span class="line">  @action changeTodoTitle(&#123;index,title&#125;)&#123;</span><br><span class="line">    <span class="keyword">this</span>.todos[index].title = title</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @computed <span class="keyword">get</span> unfinishedTodos () &#123;</span><br><span class="line">    <span class="keyword">return</span>  <span class="keyword">this</span>.todos.filter(<span class="function">(<span class="params">todo</span>) =&gt;</span> todo.done)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">@observer</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoBox</span> <span class="keyword">extends</span> <span class="title">Component</span>  </span>&#123;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'render'</span>);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &#123; <span class="comment">/* 把 unfinishedTodos 换成 todos，点击修改标题就会在控制台打印 "render".*/</span> &#125;</span><br><span class="line">          &#123;<span class="keyword">this</span>.props.store.unfinishedTodos.map(</span><br><span class="line">            (todo,index) =&gt; &lt;li key=&#123;index&#125;&gt;&#123;todo.title&#125;&lt;/li&gt;</span><br><span class="line">          )&#125;</span><br><span class="line">        &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">        &lt;div&gt;</span></span><br><span class="line"><span class="regexp">          &lt;input type="button" onClick=&#123;() =&gt; &#123;</span></span><br><span class="line"><span class="regexp">            this.props.store.changeTodoTitle(&#123;index:0,title:"修改后的todo标题"&#125;);</span></span><br><span class="line"><span class="regexp">          &#125;&#125; value="修改标题"/</span>&gt;</span><br><span class="line">        &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Store();</span><br><span class="line"></span><br><span class="line">render(</span><br><span class="line">  &lt;TodoBox store=&#123;store&#125; /&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h4 id="API"><a href="#API" class="headerlink" title="API"></a>API</h4><ul>
<li><strong>1、@observable 一个装饰器，用于将对象的某一部分变成可观察的</strong></li>
<li><strong>2、@computed 一个装饰器，计算值，根据现有状态或其他计算值衍生出的值</strong></li>
<li><strong>3、@computed.struct 用于比较结构，设置为 true 时，表达式的输出在结果上与先前的值进行比较，然后通知观察者相关的更改</strong></li>
<li><strong>4、@computed.equals(comparer) 用于自定义比较结构，comparer 是一个自定义比较函数，mobx 提供三个内置比较器 同过 import { comparer } from ‘mobx’ 得到 comparer.default 等</strong></li>
<li><strong>5、Autorun 当需要创建一个响应式函数，但是函数本省并不需要观察者时，可以使用此 api，与 computed 相同点是都会响应依赖的变化，不同点是 computed 会返回一个新的值，用作观察者观察，而 autorun 没有观察者，他只是响应变化后执行一段代码</strong></li>
<li><strong>6、@observer 由 mobx-react 提供的装饰器，用来将 react 组件转换为响应式的组件，需要确保 observer 是最深处（第一个应用）</strong></li>
<li><strong>7、Provider 组件，由 mobx-react 提供，它使用了 react 的上下文 (context) 机制，可以用来向下传递 stores</strong></li>
<li><strong>8、@inject() 将组件链接到 stores，需要传递一个 stores 名称的列表给 inject 使得 stores 可以作为组件的 props 使用</strong></li>
<li><strong>9、componentWillReact 声明周期钩子，当组件因为它观察的数据发生变化，他会被安排重新渲染，这个时候 componentWillReact 钩子会被触发</strong></li>
<li><strong>10、action 动作，动作是用来修改状态的</strong></li>
</ul>

    </div>
    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/blog/2019/07/29/React - dva 数据流/" class="pre-post btn btn-default" title='React - dva 数据流'>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">React - dva 数据流</span>
        </a>
    
    
        <a href="/blog/2019/07/20/IE 中屏蔽回退键Backspace/" class="next-post btn btn-default" title='IE 中屏蔽回退键Backspace'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">IE 中屏蔽回退键Backspace</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/blog/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
            appKey: 'erIpQac4azoCmgfBB7Dl9maa',
            placeholder: '说点什么吧',
            notify: false,
            verify: true,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: ''.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">Table of Contents</h3>
        
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#React状态管理器-Mbox"><span class="toc-text">React状态管理器 - Mbox</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1、通过透明的函数响应式编程-transparently-applying-functional-reactive-programming-TFRP-使得状态管理变得简单和可扩展"><span class="toc-text">1、通过透明的函数响应式编程 (transparently applying functional reactive programming - TFRP) 使得状态管理变得简单和可扩展</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、React-和-Mbox-的组合"><span class="toc-text">2、React 和 Mbox 的组合</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3、MobX-会对什么作出响应？"><span class="toc-text">3、MobX 会对什么作出响应？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4、原则"><span class="toc-text">4、原则</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#一个读取store的例子"><span class="toc-text">一个读取store的例子</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#一个写store的例子"><span class="toc-text">一个写store的例子</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#API"><span class="toc-text">API</span></a></li></ol></li></ol></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>







<script src="/blog/js/app.js?rev=@@hash"></script>

</body>
</html>